<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <todo-header></todo-header>
        <todo-list></todo-list>
        <todo-footer></todo-footer>
      </div>
    </div>
  </div>
</template>

<script>
  import todoHeader from "./components/todo-header"
  import todoList from "./components/todo-list"
  import todoFooter from "./components/todo-footer"
  export default {
    name: 'App',
    components:{
      "todo-header":todoHeader,
      "todo-list":todoList,
      "todo-footer":todoFooter,
    }
  }
</script>

<style  scoped>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>
